<template>
  <div class="app-container">
    <div class="top-table">
      <template>
        <label-wrap>内容：</label-wrap>
        <el-input v-model="formMsg.name"  class="ment-margin" size="small" style="width: 120px;"/>
        <label-wrap>消息添加时间：</label-wrap>
          <el-date-picker v-model="formMsg.date1"  class="ment-margin" type="date"  size="small" placeholder="选择日期" style="width:140px;"  />
        <span >-</span>
          <el-date-picker v-model="formMsg.date2" class="ment-margin" type="date"  size="small" placeholder="选择日期" style="width: 140px;"  />
      </template>
        <template>
          <label-wrap>状态：</label-wrap>
          <el-select v-model="status"  size="small" style="width: 90px;margin-right: 10px">
            <el-option size="small" label="正常" value="正常"></el-option>
            <el-option  size="small" label="已删除" value="已删除"></el-option>
            <el-option  size="small" label="已过期" value="已过期"></el-option>
          </el-select>
        </template>
        <el-button
          size="small"
          icon="el-icon-search"
          type="primary"
          @click="findtolist"
        >查询</el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          type="warning"
          @click="listremove"
        >清空</el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          type="danger"
          :disabled="multipleSelection.length===0 ? true : false"
          @click="deletelis"
        >批量删除</el-button>
    </div>
    <el-table
      size="medium"
      :data="finalist"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        size="small"
        width="55"
      />
      <el-table-column
        prop="id"
        label="ID"
      />
      <el-table-column
        prop="date"
        label="消息内容"
      />
      <el-table-column
        prop="create_time"
        label="注册时间"
      />
      <el-table-column
         label="状态"
         prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" type="success">已启用</el-tag>
          <el-tag v-else type="danger">未启用</el-tag>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";
import request from "@/utils/request";

export default {
  name: 'ListOf',
  data() {
    return {
      formMsg: {
        name: '',
        date1: '',
        date2: ''
      },
      multipleSelection: [],
      value:'',
      status:'',
      muenment:''
    }
  },
  created() {
    this.getfend()
  },
  computed:{
    ...mapState(['finalist'])
  },
  methods:{
    ...mapActions(['getfend']),
    //查询
    findtolist(){
      if (this.muenment ===''){
        this.$message.error('查询内容不能为空!!')
      }
    },
    // 清空
    listremove(){},
    //批量删除
    handleSelectionChange(val){
      this.multipleSelection = val;
      //console.log(this.multipleSelection)
    },
    deletelis(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']条数据，是否继续？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let ids ='?'
        this.multipleSelection.forEach(item =>{
          ids += ids +item.id + '&'
        })
        request.delete('/delete'+ids).then((resp)=>{
          if (resp){
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        }).catch(()=>{
          this.$message({
            message: '取消删除!'
          })
        })
      })
    },
  }
}
</script>

<style scoped>
.ment-margin{
  margin-bottom: 20px;
  margin-right: 7px;
}
.top-table{

}
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
</style>
